import React, { Component } from 'react';
import { Card, Calendar, Badge, Drawer, Button, Icon } from 'antd';
class Calender extends Component {

    state = { visible: false, date: '1111' };

    onClose = () => {
        this.setState({
            visible: false,
        });
    };

    getListData = (value: any) => {
        let listData;
        switch (value.date()) {
            case 8:
                listData = [
                    { type: 'success', content: '张明1 经济AS(CAIE123) 13:00~14:00.' },
                    { type: 'success', content: '张明2 物理 13:00~14:00.' },
                ];
                break;
            case 10:
                listData = [
                    { type: 'success', content: '张明fa 物理 13:00~14:00.' },
                    { type: 'success', content: '张明f 物理 13:00~14:00.' },
                    { type: 'success', content: '张明d 物理 13:00~14:00.' },
                ];
                break;
            case 15:
                listData = [
                    { type: 'success', content: '张明h 物理 13:00~14:00.' },
                    { type: 'success', content: '张明fg 物理 13:00~14:00.' },
                    { type: 'success', content: '张明hg 物理 13:00~14:00.' },
                ];
                break;
            default:
        }
        return listData || [];
    }

    dateCellRender = (value: any) => {
        const listData = this.getListData(value);
        return (
            <ul className="events">
                {listData.map(item => (
                    <li key={item.content}>
                        <Badge status={item.type} text={item.content} />
                    </li>
                ))}
            </ul>
        );
    }

    getMonthData = (value: any) => {
        if (value.month() === 8) {
            return 9;
        }
        return 0;
    }

    monthCellRender = (value: any) => {
        const num = this.getMonthData(value);
        return num ? (
            <div className="notes-month">
                <section>{num}</section>
                <span>当前月份</span>
            </div>
        ) : null;
    }

    onSelect = (e: Date) => {
        alert(e);
        this.setState({
            visible: true,
        });
    }
    render() {
        return (
            <Card>
                <Calendar
                    onSelect={this.onSelect}
                    dateCellRender={this.dateCellRender} monthCellRender={this.monthCellRender} />
                <Drawer
                    title='课程内容'
                    width={420}
                    onClose={this.onClose}
                    visible={this.state.visible}
                >   
                    <div
                        style={{
                            position: 'absolute',
                            left: 0,
                            bottom: 0,
                            width: '100%',
                            borderTop: '1px solid #e9e9e9',
                            padding: '10px 16px',
                            background: '#fff',
                            textAlign: 'right',
                        }}
                    >
                        <Button onClick={this.onClose} type="primary">
                            关闭
                        </Button>
                    </div>
                </Drawer>
            </Card>
        );
    }
}
export default Calender;
